<!--
 * @Author: Lu junwen
 * @Date: 2022-04-12 10:29:36
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-04-13 10:22:16
 * @FilePath: \vue-shop-app-customer\src\views\Mine\UserInfo.vue
-->
<template>
  <div class="user_info">
    <div class="header">
      <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <div class="background"></div>
      <div class="face">
        <div class="face_box">
          <van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead" />
        </div>
      </div>
      <div class="form">
        <van-form ref="form">
          <van-field
            v-model="info.nickname"
            name="昵称"
            label="昵称"
            placeholder="昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
            :disabled="disabled"
          />
          <van-field
            v-model="info.mobile"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="mobileRule"
            :disabled="disabled"
          />
          <van-field
            v-model="info.email"
            name="电子邮箱"
            label="电子邮箱"
            placeholder="电子邮箱"
            :rules="emailRule"
            :disabled="disabled"
          />
          <div class="button">
            <van-button
              round
              block
              type="info"
              v-show="disabled === true"
              color="linear-gradient(90deg, #f85959, #ffc773)"
              @click="disabled = false"
            >修改</van-button>
            <van-button
              round
              block
              type="info"
              native-type="submit"
              v-show="disabled === false"
              color="linear-gradient(90deg, #f85959, #ffc773)"
              @click="onSubmit"
            >提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      info: {},
      fileList: [],
      mobileRule: [
        {
          required: true,
          message: '请输入手机号'
        },
        {
          pattern: /^1[34578]\d{9}$/,
          message: '请正确格式的手机号',
        }
      ],
      emailRule: [
        {
          required: true,
          message: '请输入电子邮箱'
        },
        {
          pattern: /^\w+@\w+(\.\w+)+$/,
          message: '请正确格式的电子邮箱',
        }
      ],
      disabled: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    afterRead(file) {
      console.log(file.file);
      file.status = 'uploading';
      file.message = '上传中...';
      let formData = new FormData()
      formData.append('file', file.file)
      this.axios.post('upload', formData).then(res => {
        console.log(res.data.data.url);
        this.info.face = res.data.data.url
        this.updateInfo()
        file.status = 'done';
        file.message = '上传成功';
      })
    },
    updateInfo() {
      this.axios.put(`users/${this.info.id}`, this.info).then(res => {
        console.log(res.data.data);
        localStorage.setItem('userInfo', JSON.stringify(res.data.data))
      })
    },
    onSubmit() {
      this.$refs.form.validate().then(() => {
        new Promise((res,rej) => {
          this.updateInfo()
          res()
        }).then(res => {
          this.disabled = true
          Toast.success('修改成功')
        })
      })
    }
  },
  mounted() {
    new Promise((res, rej) => {
      this.info = JSON.parse(localStorage.getItem('userInfo'))
      res()
    }).then(res => {
      let obj = { url: this.info.face }
      this.fileList.push(obj)
      console.log(this.fileList);
    })
  }
}
</script>

<style lang="scss" scoped>
.user_info {
  height: 100vh;
  // background-color: #f8f8f8;
  .content {
    position: relative;
    .background {
      position: absolute;
      height: 120px;
      width: 100%;
      top: 0;
      left: 0;
      background-image: linear-gradient(90deg, #f85959, #ffc773);
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
    }
    .face {
      position: relative;
      padding-top: 75px;
      display: flex;
      justify-content: center;
      .face_box {
        display: inline-block;
        position: relative;
        ::v-deep .van-image__img {
          border-radius: 50px;
          border: 1px solid #ccc;
        }
      }
    }
    .form {
      position: relative;
      margin-top: 50px;
      height: 450px;
      ::v-deep .van-field {
        margin-bottom: 15px;
      }
      .button {
        position: fixed;
        margin: 16px;
        // padding-right: 56px;
        width: 92%;
        bottom: 50px;
      }
    }
  }
}
</style>